<template>
	<view style="overflow: hidden;">
		<oVideo :ref="`videoRef`" :item="{src: 'https://lishengyanjing.oss-cn-beijing.aliyuncs.com/lishneg/20240918/22223333.mp4'}" @ended="onEnded"
			@showPinglun="showPinglun=true" @showMulu="showMulu=true"/>
	</view>
</template>

<script>
	// let systemInfo = uni.getSystemInfoSync();
	// const dom = uni.requireNativePlugin('dom')
	import oVideo from "@/components/o-video"
	export default {
		components: {
			oVideo
		},
		data() {
			return {
				
			}
		},
		onReady() {
			// this.$refs[`videoRef`][0].play()
		},
		methods: {
			
		}
	}
</script>

<style lang="scss">
	.pop {
		position: fixed;
		width: 750rpx;
		background-color: #fff;
		border-radius: 30rpx 30rpx 0 0;
		left: 0;
		transition-property: top;
		transition-duration: 150ms;
		transition-timing-function: ease-in-out;
		z-index: 999;

		.title {
			padding: 30rpx 30rpx 0;
			align-items: center;
			justify-content: center;
			line-height: 40rpx;
		}

		&--close-btn {
			height: 40rpx;
			width: 40rpx;
			position: absolute;
			right: 30rpx;
			top: 30rpx;
		}
	}

	.border-bottom {
		width: 750rpx;
		border-bottom: 1rpx solid #e8e8e8;
		transform: scaleY(.5);
		margin-top: 30rpx;
	}

	.pinglun {
		flex-direction: row;
		align-items: flex-start;
		padding: 30rpx;

		.touxiang {
			height: 60rpx;
			width: 60rpx;
			border-radius: 50%;
		}
	}

	.mulu {
		padding-left: 30rpx;
		padding-right: 30rpx;

		.touxiang {
			height: 114.8rpx;
			width: 78.4rpx;
			border-radius: 10rpx;
		}

		.title {
			color: rgba(0, 0, 0, .85);
			padding: 0;
		}

		.active {
			.title {
				color: #f85400;
			}
		}

		.tag {
			background-color: #f85400;
			padding: 7rpx 12rpx;
			border-radius: 10rpx;

			.text {
				color: #fff;
			}
		}
	}

	.flex-1 {
		flex: 1;
	}

	.lh-40 {
		line-height: 40rpx;
	}

	@for $i from 20 to 40 {
		.fs-#{$i} {
			font-size: $i + rpx;
		}
	}
</style>